<template>
   <div class="TEDServerViewCon">
       <!-- 操作系统基本信息 -->
                <el-card >
                    <div slot="header" class="clearfix">
                        <span>操作系统基本信息</span>
                    </div>
                    <div>
                        <el-table :data='this.serverData.os' border style="width: 100%">
                            <el-table-column prop="IP" label="IP地址">
                            </el-table-column>
                            <el-table-column :prop="'Host name'" label="主机名">
                            </el-table-column>
                            <el-table-column :prop="'Os version'" label="操作系统版本">
                            </el-table-column>
                            <el-table-column :prop="'CPU COUNT'" label="CPU核数">
                            </el-table-column>
                            <el-table-column prop="Hrmemorysize" label="内存大小（KB）">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
                <!-- //CPU使用率				 -->
                <el-card >
                    <div slot="header" class="clearfix">
                        <span>CPU使用率</span>
                    </div>
                    <div>
                        <el-table :data='this.serverData.cpu' border style="width: 100%">
                            <el-table-column :prop="'system used'" label="系统层面使用率%">
                            </el-table-column>
                            <el-table-column :prop="'app used'" label="应用使用率%">
                            </el-table-column>
                            <el-table-column prop="idle" label="空闲率%">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
                <!-- //内存使用率				 -->
                <el-card >
                    <div slot="header" class="clearfix">
                        <span>内存使用率</span>
                    </div>
                    <div>
                        <el-table border :data='this.serverData.memory' style="width: 100%">
                            <el-table-column :prop="'Physical memory size'" label="物理内存总大小(GB)">
                            </el-table-column>
                            <el-table-column prop="used" label="已经使用大小(GB)">
                            </el-table-column>
                            <el-table-column prop="free" label="剩余大小(GB)">
                            </el-table-column>
                            <el-table-column prop="usdpercentage" label="使用率%">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
                <!-- //文件系统使用率				 -->
                <el-card >
                    <div slot="header" class="clearfix">
                        <span>文件系统使用率</span>
                    </div>
                    <div>
                        <el-table :data='this.serverData.file' border style="width: 100%">
                            <el-table-column prop="toalGB" label="文件总大小(GB)">
                            </el-table-column>
                            <el-table-column prop="useGB" label="已经使用容量(GB)">
                            </el-table-column>
                            <el-table-column prop="freeGB" label="剩余容量(GB)">
                            </el-table-column>
                            <el-table-column prop="usepre" label="使用率%">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
   </div>
</template>

<script>
import {
    todayosinfo,
    todayostext,
	
    
} from "@/api/index";
export default {
    props: {
        info: null,
    },
   data(){
      return{
         serverData:{
				os:[],
				cpu:[],
				memory:[],
				file:[]
			},
      }
   },
   created(){
      this.initData()
   },
   methods:{
      initData(){
         // 操作系统基本信息
                todayosinfo({ip:this.info.ip})
                    .then((_) => {
						this.serverData.os=[_]
					})
                    .catch((_) => {});
                //CPU使用率
                todayostext({ip:this.info.ip})
                    .then((_) => {
						this.serverData.cpu=[_.cpu]
						this.serverData.memory=[_.memory]
						this.serverData.file=[_.filesystem]
						
					})
                    .catch((_) => {});
      }
   }
};
</script>

<style>
.TEDServerViewCon {
    padding: 15px;
    height: 96vh;
    display: grid;
    row-gap: 15px;
    background: #ecf0f1;

}
</style>